<template>
  <view class="search-wrapper">
    <u-sticky offset-top="0" bg-color="white">
      <view style="background-color: white">
      <view class="search-content">
        <up-input
            v-model="searchParams.search"
            placeholder="发现快乐时光"
            shape="circle"
            @keydown.enter="search"
            prefixIcon="search"
            auto-focus="true"
            prefixIconStyle="font-size: 22px;color: #909399"
        ></up-input>
        <text @tap="search" style="color: #4ea4f9;font-size: 30rpx;font-weight: 550">&nbsp;&nbsp;搜索</text>
      </view>
      <view v-if="showTag" style="padding-bottom: 10px">
        <u-tabs
            :current="tagIndex"
            @click="toScroll"
            :list="list4"
            lineWidth="20"
            lineHeight="7"
            :lineColor="`url(${lineBg}) 100% 100%`"
            :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
    }"
            :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
    }"
            itemStyle="padding-left: 20%; padding-right: 20%; height: 34px;"
        >
        </u-tabs>
      </view>
      </view>
    </u-sticky>

    <swiper :current="tagIndex" class="swiper"
            :circular="false" @change="swiperChange"
            style="height: 100vh"
            swiperDuration="200">
      <swiper-item>
        <scroll-view v-if="postList.length > 0" scroll-y style="height: 100vh"
                     scroll-with-animation
                     @scrolltolower="onScrollToLower()"
        >
          <Blog v-for="(item, index) in postList" :key="item.id" :post="item"/>
          <view style="height:60px"></view>

        </scroll-view>
        <u-empty v-else
                 mode="search"
                 icon="http://cdn.uviewui.com/uview/empty/search.png"
        >
        </u-empty>
      </swiper-item>

      <swiper-item>
        <scroll-view v-if="userList.length > 0" scroll-y style="height: 100vh"
                     scroll-with-animation
                     @scrolltolower="onScrollToLower()"
        >
          <navigator :url="`/pages/my/userInfo?id=${user.userId}`" v-for="(user, index) in userList" :key="user.id" class="user">
            <view class="user-left">
              <up-avatar :src="user.avatar" shape="circle"></up-avatar>
              <view class="user-info">
                <view style="display: flex;align-items: center">
                  <text class="u-line-1"  style="color: black">{{ user.userName }}</text>&nbsp;
                  <image style="width: 15px;height: 15px;" :src="user?.sex == 1 ? 'http://www.douluodalu.icu:9000/school/static/man_active.png' : 'http://www.douluodalu.icu:9000/school/static/woman_active.png' "></image>
                </view>
                <text v-if="user?.introduction !== undefined" class="u-line-1" style="color:rgba(84,87,87,0.5);font-size: 13px"> {{ user.introduction }}</text>
              </view>
            </view>
            <view @tap.stop="followUser(user.userId,user?.isFollowed,index)" v-if="!user?.isFollowed && user.userId != myUserId" class="user-right">
              <text>+关注</text>
            </view>
            <view @tap.stop="followUser(user.userId,user?.isFollowed,index)" v-if="user?.isFollowed && user.userId != myUserId" class="user-right-follow">
              <text>已关注</text>
            </view>

          </navigator>
          <view style="height:60px"></view>
        </scroll-view>
        <u-empty v-else
                 mode="search"
                 icon="http://cdn.uviewui.com/uview/empty/search.png"
        >
        </u-empty>
      </swiper-item>
    </swiper>


  </view>

</template>

<script>
import Blog from "@/components/Blog.vue";
import {searchPost} from "@/api/article";
import {followUser, searchUser} from "@/api/user";
import {getToken, getUserId} from "@/utils/auth";

export default {
  components: {Blog},
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      tagIndex: 0,
      trigger: false,
      showRefreshText: false,
      showTag: false,
      RefreshPostNum: 0,
      lineBg: "",
      list4: [
        {name: '帖子',badge: {value: 0}},
        {name: '用户', badge: {value: 0}}],

      postList: [],
      userList: [],
      searchParams: {
        search: '',
        current: 1,
        pageSize: 15
      },
      myUserId: '',
    }
  },
  onLoad() {
    this.myUserId = getUserId()
  },
  methods: {
    async followUser(id,isFollowed,index) {
      let token = getToken();
      if (!(token !== null && token !== '' && token !== undefined)) {
        uni.showToast({
          title: '请先登录',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateTo({url: '/pages/my/login'})
        }, 500)
        return;
      }
      if(isFollowed){
        uni.showModal({
          content: '确定要取消关注吗？',
          success: async (res) => {
            if (res.confirm) {
              const res = await followUser(id,false)
              if(res.code == 200){
                this.userList[index].isFollowed = false
                uni.showToast({title: '取消关注成功',icon: 'none'})
              }
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      }else {
        const res = await followUser(id,true)
        if(res.code == 200){
          this.userList[index].isFollowed = true
          uni.showToast({title: '关注成功',icon: 'none'})
        }
      }
    },
    toScroll(event) {
      this.tagIndex = event.index

    },
    swiperChange(event) {
      this.tagIndex = event.detail.current

    },
    search() {
      if (this.searchParams?.search.trim() !== '' || this.searchParams.search.trim()?.length !== 0) {
        this.getSearchPostList()
        this.getSearchUserList()
      } else {
        uni.showToast({title: '请输入搜索内容',icon: 'none'})
      }

    },
    async getSearchPostList() {
      if (this.searchParams?.search.trim() != '' || this.searchParams.search.trim()?.length != 0) {
        const {data: res} = await searchPost(this.searchParams)
        this.postList = res.records
        this.list4[0].badge.value = res.total
        this.showTag = true
      } else {
        uni.showToast({title: '请输入搜索内容',icon: 'none'})
      }

    },
    async getSearchUserList() {
      if (this.searchParams?.search.trim() != '' || this.searchParams.search.trim()?.length != 0) {
        const {data: res} = await searchUser(this.searchParams.search)
        this.userList = res
        this.list4[1].badge.value = res.length
        this.showTag = true
      } else {
        uni.showToast({title: '请输入搜索内容',icon: 'none'})
      }

    },
    async onScrollToLower() {
      this.searchParams.current++
      const {data: res} = await searchPost(this.searchParams)
      this.postList = this.postList.concat(res.records)
    },
    change(e) {
      console.log('change', e);
    }
  }
}
</script>
<style>
.search-history-item {
  background-color: #f7f7f7;
  margin: 5px;
  color: black;
  border-radius: 5px;
  font-size: 14px;
  padding: 5px;
  float: left;
}

.search-history-list {
}

.user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
}

.user-left {
  display: flex;
  align-items: center;
}

.avatar {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

.user-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 1rem;
}

.user-right {
  color: #4ea4f9;
  font-size: 12px;
  background-color: #FFFFFF;
  border: 1px solid #4ea4f9;
  border-radius: 72rpx;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-right-follow {
  color: rgba(114, 118, 123, 0.38);
  font-size: 12px;
  background-color: #FFFFFF;
  border: 1px solid rgba(114, 118, 123, 0.38);
  border-radius: 72rpx;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-history {
  margin: 20px 0;
}

.search-history-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search {
  width: 81vw;
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
  height: 16rpx;
  border-radius: 25px;
  padding: 6px;
  font-size: 14px;
  color: #a1a4a6;
}

.search-content {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
}

.search-wrapper {
  padding: 12px 0;
}

.search-placeholder {
  padding-left: 8px;
}
</style>
